<template>
<p>是否有出版书籍:</p>
<span>{{ publishedBooksMessage }}</span>
</template>

<script setup>
import {reactive, computed} from 'vue'

//下面使用reactive声明对象的响应式,不是用ref了(官方推荐都用ref就行)
const author = reactive({
    name: 'Lilixi',
    books: [
        'Vue2 - aaa',
        'Vue3 - bbb'
    ]
})

//下面的计算属性里面用到了二元表达式 格式:判断?'值1':'值2'  即判断正确返回值1,否则返回值2
const publishedBooksMessage = computed(() => {
    return author.books.length > 0 ? 'Yes' : 'No'
})
</script>